/* 成绩录入页面思路分析
1.页面一加载,发送ajax请求学员信息列表
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框
*/


//页面一加载,请求数据
const getScoreList = () => {
    //发送请求查数据
    axios({
        url: '/score/list',
        method: 'get',
    }).then(res => {
        //成功回调
        // console.log(res)
        const data = res.data.data
        document.querySelector('tbody').innerHTML = Object.keys(data).map(item => `
        <tr>
            <th scope="row">${item}</th>
            <td>${data[item].name}</td>
            <td class="score" data-id="${item}" data-batch="1">${data[item].score[0]}</td>
            <td class="score" data-id="${item}" data-batch="2">${data[item].score[1]}</td>
            <td class="score" data-id="${item}" data-batch="3">${data[item].score[2]}</td>
            <td class="score" data-id="${item}" data-batch="4">${data[item].score[3]}</td>
            <td class="score" data-id="${item}" data-batch="5">${data[item].score[4]}</td>
        </tr>
        `).join('')
    })
}
//调用函数
getScoreList()


// 2.点击分数td,给当前td动态添加一个input输入框
//     * (1)td标签是动态新增的元素,需要注册委托事件
//      (2)学员id和姓名不能修改，只有分数才可以修改
// *    (3)输入框默认显示当前点击的td的文本
document.querySelector('tbody').addEventListener('click', function (e) {
    //判断是不是分数td
    if (e.target.classList.contains('score')) {
        //动态添加一个input输入框
        const input = document.createElement('input')
        input.classList.add('inp')
        e.target.appendChild(input)
        // (3)输入框默认显示当前点击的td的文本
        input.value = e.target.innerText
        //细节优化  输入框自动聚焦+失去焦点自动移除
        // input.focus()聚焦
        input.select()//聚焦加选中
        input.addEventListener('blur', function () {
            input.remove()
        })
        //获取到td
        const td = e.target

        //(4)给输入框注册键盘按下事件
        document.querySelector('tbody').addEventListener('keyup', function (e) {
            //判断回车按钮
            if (e.key === "Enter") {
                const stu_id = td.dataset.id
                const batch = td.dataset.batch
                const score = input.value
                // 发送请求
                axios({
                    url: '/score/entry',
                    method: 'post',
                    data: {
                        stu_id,
                        batch,
                        score
                    },
                }).then(res => {
                    //成功回调
                    // console.log(res)
                    if (res.data.code === 0) {
                        //重新查询数据
                        getScoreList()
                        Toast.success(res.data.message)
                    }
                }).catch(err => {
                    Toast.fail(err.response.data.message)
                    //重新查询数据
                    getScoreList()
                })
            }
        })
    }
})